<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
<#include "/head.ftl">
    <link rel="stylesheet" type="text/css" href="/static/css/user.css">
    <script type="text/javascript">
        var show_dlg;
        $(function () {
            $('#dg').datagrid({
                url: '/user/list',
                method: 'get',
                title: '用户列表',
                iconCls: 'icon-ok',
                fit: true,
                fitColumns: true,
                rownumbers: true,
                pagination: true,
                singleSelect: true,
                border: false,
                striped: true,
                toolbar: [{
                    text: '添加用户',
                    iconCls: 'icon-add',
                    handler: function () {
                        newUser();
                    }
                }, '-', {
                    iconCls: 'icon-help',
                    handler: function () {
                        alert('帮助按钮');
                    }
                }],
                columns: [[
                    {field: 'id', title: 'id', hidden: true},
                    {field: 'loginName', title: 'loginName'},
                    {field: 'name', title: 'name'},
                    {field: 'password', title: 'password'},
                    {field: 'status', title: 'status'},
                    {field: 'createTime', title: 'createTime', formatter: Common.formatDate},
                    {field: 'updateTime', title: 'updateTime', formatter: Common.formatDate},
                    {field: 'memo', title: 'memo'},
                    {field: 'action', title: 'Action', formatter: operation}
                ]]
            });


//            show_dlg = $('#dlg').show().dialog({
//                title: 'My Dialog',
//                width: 400,
//                height: 300,
//                closed: false,
//                cache: false,
//                modal: true,
////                onClose:function(){
////                    alert('close');
////                },
////                onOpen: function() {
////                    alert('open');
////                }
//            }).dialog('close')
//
        });
        var url;
        function newUser() {
            $('#dlg').dialog('open').dialog('setTitle', 'New User');
            $('#fm').form('clear');
            url = '/user/save';
        }
        function editUser() {
            var row = $('#dg').datagrid('getSelected');
            if (row) {
                $('#dlg').dialog('open').dialog('setTitle', 'Edit User');
                $('#fm').form('load', row);
                url = '/user/update?id=' + row.id;
            }
        }
        function saveUser() {
            $('#fm').form('submit', {
                url: url,
                onSubmit: function () {
                    return $(this).form('validate');
                },
                success: function (result) {
                    var result = eval('(' + result + ')');
                    if (result.success) {
                        $('#dlg').dialog('close');		// close the dialog
                        $('#dg').datagrid('reload');	// reload the user data
                    } else {
                        $.messager.show({
                            title: 'Error',
                            msg: result.msg
                        });
                    }
                }
            });
        }
        function removeUser() {
            var row = $('#dg').datagrid('getSelected');
            if (row) {
                $.messager.confirm('Confirm', 'Are you sure you want to remove this user?', function (r) {
                    if (r) {
                        $.post('/user/delete', {id: row.id}, function (result) {
                            if (result.success) {
                                $('#dg').datagrid('reload');	// reload the user data
                            } else {
                                $.messager.show({	// show error message
                                    title: 'Error',
                                    msg: result.msg
                                });
                            }
                        }, 'json');
                    }
                });
            }
        }
        function operation(value, row, index) {
///            var id = row.id;
            var str = '';
//            str += '<a href="javascript:void(0)" onclick="newUser();" >添加</a>';
//            str += '|';
            str += '<a href="javascript:void(0)" onclick="editUser();" >编辑</a>';
//            str += '<a href="javascript:void(0)" onclick="editUser(' + id + ');" >编辑</a>';
            str += '|';
            str += '<a href="javascript:void(0)" onclick="removeUser();" >删除</a>';
            return str;
            //            return "<a href='" + row.id + "' target='_blank'>Cell Link Name</a>";
        }

        function grantFun(id) {
            show_dlg.dialog('open');
            $('#id').val(id);
            $('#tt').tree({
                checkbox: true,
                url: '/permission/tree'
            });
        }

        function save() {
            $('#fm').form('submit', {
                url: "/user/",
                onSubmit: function () {
                    return $(this).form('validate');
                },
                success: function (result) {
                    var result = eval('(' + result + ')');
                    if (result.success) {
                        $('#dlg').dialog('close');		// close the dialog
                        $('#dg').datagrid('reload');	// reload the user data
                    } else {
                        $.messager.show({
                            title: 'Error',
                            msg: result.msg
                        });
                    }
                }
            });
        }

        function grant() {
            var nodes = $('#tt').tree('getChecked');
            var ids = '';
            for (var i = 0; i < nodes.length; i++) {
                ids += nodes[i].id + ',';
            }
//            $('#ids').val(ids);
            $('#ff').form('submit', {
                url: '/permission/grant',
                onSubmit: function (param) {
//                    param.id = $('#id').val();
                    param.ids = ids;
                },
                success: function (result) {
                    var result = eval('(' + result + ')');
                    if (result.success) {
                        show_dlg.dialog('close');
                        $.messager.show({	// show error message
                            title: 'Success',
                            msg: '授权成功'
                        });
                    } else {
                        $.messager.show({	// show error message
                            title: 'Error',
                            msg: result.msg
                        });
                    }
                }
            });
        }

    </script>
</head>
<body>
<table id="dg"></table>
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px" closed="true"
     buttons="#dlg-buttons">
    <div class="ftitle">User Information</div>
    <form id="fm" method="post" novalidate>
        <input name="id" class="easyui-validatebox" type="hidden">
        <div class="fitem">
            <label>Login Name:</label>
            <input name="loginName" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>Name:</label>
            <input name="name" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>Password:</label>
            <input name="password" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>Status:</label>
            <input name="status" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>Desc:</label>
            <input name="memo" class="easyui-validatebox" required="true">
        </div>
        <!--<div class="fitem">-->
        <!--<label>Phone:</label>-->
        <!--<input name="phone">-->
        <!--</div>-->
        <!--<div class="fitem">-->
        <!--<label>Email:</label>-->
        <!--<input name="email" class="easyui-validatebox" validType="email">-->
        <!--</div>-->
    </form>
</div>
<div id="dlg-buttons">
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel"
       onclick="javascript:show_dlg.dialog('close')">Cancel</a>
</div>
</body>
</html>